<template>
  <div>
    <van-nav-bar
      :title="title"
      left-arrow
      left-text="返回"
      @click-left="$emit('close')"
    />
    <van-form ref="submitForm" @submit="doSubmit">
      <van-field
        readonly
        clickable
        name="date"
        :value="submitForm.date"
        label="日期选择"
        placeholder="点击选择日期"
        input-align="left"
        :rules="[{ required: true, message: '请选择日期' }]"
        @click="showDate = true"
      />
      <van-field
        v-model="submitForm.employeeName"
        readonly
        disabled
        name="customerName"
        label="员工名称"
        placeholder="点击选择员工"
        input-align="left"
      />
      <van-field
        v-model="submitForm.shiftName"
        name="shiftId"
        label="班次"
        input-align="left"
        placeholder="请选择班次"
        :rules="[{ required: true, message: '请选择班次' }]"
        clickable
        readonly
        @click="showShift=true"
      />
      <van-field
        v-model="submitForm.quantity"
        readonly
        disabled
        name="quantity"
        label="产量"
        type="digit"
        placeholder="请输入产量"
        input-align="left"
      />
      <van-field
        v-model="submitForm.processName"
        name="processName"
        label="工序"
        input-align="left"
        :rules="[{ required: true, message: '请选择工序' }]"
        clickable
        readonly
        @click="showProcess=true"
      />
      <van-field
        v-model="submitForm.pieceRateWage"
        disabled
        readonly
        name="pieceRateWage"
        label="计件工资"
        type="number"
        placeholder="请输入计件工资"
        input-align="left"
      />
      <van-field
        v-model="submitForm.subsidy"
        name="subsidy"
        label="补贴"
        type="number"
        placeholder="请输入补贴"
        input-align="left"
      />
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-calendar v-model="showDate" :min-date="minDate" :show-confirm="false" @confirm="onConfirmDate" />
    <van-popup v-model="showShift" position="bottom">
      <van-picker
        show-toolbar
        :columns="shiftList"
        @confirm="onShiftConfirm"
        @cancel="showShift = false"
      />
    </van-popup>
    <van-popup v-model="showProcess" position="bottom">
      <van-picker
        show-toolbar
        :columns="processList"
        @confirm="onProcessConfirm"
        @cancel="showProcess = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { updatePieceRateWageDetailById, selectPieceRateWageDetailById } from '@/api/pieceRateWage'
import { Toast } from 'vant'
import moment from 'moment'
import Moment from 'moment/moment'
import { selectAllShift } from '@/api/shift'
import { selectAllProcess } from '@/api/process'

export default {
  name: 'PieceRateWageUpdateModule',
  data() {
    return {
      showShift: false,
      showDate: false,
      showProcess: false,
      title: '',
      submitForm: {},
      shiftList: [],
      processList: [],
      minDate: moment(new Date()).subtract(30, 'years').toDate()
    }
  },
  methods: {
    init(id) {
      this.selectAllShift()
      this.selectAllProcess()
      this.resetForm()
      this.title = '修改计件工资'
      if (!id) {
        this.title = '新增计件工资息'
        return
      }
      selectPieceRateWageDetailById(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
        }
      })
    },
    resetForm() {
      this.submitForm = {
        id: '',
        customerId: '',
        orderId: '' }
    },
    doSubmit() {
      updatePieceRateWageDetailById(this.submitForm).then(resp => {
        if (resp.success) {
          this.$toast.success('操作成功')
          this.$emit('close')
        }
      })
    },
    onShiftConfirm(row) {
      this.submitForm.shiftId = row.id
      this.submitForm.shiftName = row.name
      this.showShift = false
    },
    onProcessConfirm(row) {
      this.submitForm.processId = row.id
      this.submitForm.processName = row.name
      this.showProcess = false
    },
    handleChangePaymentMethod(val) {
      this.submitForm.receiptMethod = val
    },
    onConfirmDate(row) {
      this.submitForm.date = Moment(row).format('YYYY-MM-DD')
      this.showDate = false
    },
    handleCloseOrder(row) {
      this.showOrder = false
      if (row) {
        this.orderInfo = row
        this.submitForm.orderId = row.id
        this.submitForm.orderNo = row.orderNo
        this.setAttribute(row)
      }
    },
    setAttribute(row) {
      this.orderInfo.attribute = row.productAttribute.map(e => e.value).join('*')
    },
    getContainer() {
      return document.body
    },
    selectAllShift() {
      selectAllShift().then(resp => {
        if (resp.success) {
          this.shiftList = resp.data
        }
      })
    },
    selectAllProcess() {
      selectAllProcess().then(resp => {
        if (resp.success) {
          this.processList = resp.data
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
